<template>
    <div>
        <!--右边-->
        <div class="h-27">
            <div class="h-28">
                <ul class="h-29">
                    <li :class="type==1?'active':''" @click="changeType(1)"><a href="javascript:;">
                        <div class="h-30"><img class="h1-30" src="@/assets/image/gp.png"/><img class="h2-30" src="@/assets/image/gp_on.png"/></div>
                        <div class="h-31">全部挂牌(<span>1</span>)</div>
                    </a></li>
                    <li :class="type==2?'active':''" @click="changeType(2)"><a href="javascript:;">
                        <div class="h-30"><img class="h1-30" src="@/assets/image/sh.png"/><img class="h2-30" src="@/assets/image/sh_on.png"/></div>
                        <div class="h-31">待审核(<span>1</span>)</div>
                    </a></li>
                    <li :class="type==3?'active':''" @click="changeType(3)"><a href="javascript:;">
                        <div class="h-30"><img class="h1-30" src="@/assets/image/gp.png"/><img class="h2-30" src="@/assets/image/gp_on.png"/></div>
                        <div class="h-31">挂牌成功(<span>1</span>)</div>
                    </a></li>
                    <li :class="type==4?'active':''" @click="changeType(4)"><a href="javascript:;">
                        <div class="h-30"><img class="h1-30" src="@/assets/image/qd.png"/><img class="h2-30" src="@/assets/image/qd_on.png"/></div>
                        <div class="h-31">待签订(<span>1</span>)</div>
                    </a></li>
                    <li :class="type==5?'active':''" @click="changeType(5)"><a href="javascript:;">
                        <div class="h-30"><img class="h1-30" src="@/assets/image/cj.png"/><img class="h2-30" src="@/assets/image/cj_on.png"/></div>
                        <div class="h-31">已成交(<span>1</span>)</div>
                    </a></li>
                </ul>
            </div>
            <div class="h-32">
                <!--<div class="h-33">全部挂牌(<span>20</span>)</div>-->
                <div class="h-34-box">
                    <ul class="h-34">
                        <li v-for="item in tradingList" :key="item.product_id" >
                          <a href="javascript:;">
                            <div class="h-38">
                              <div class="h-35"><span class="h-36">{{item.product_name}}</span><span class="h-37"><img src="@/assets/image/fa-eye.png"/><span>{{item.see_num}}</span></span></div>
                              <div class="h-39">要求:{{item.delist_text}}</div>
                              <div class="h-40">
                                <div class="h-41">
                                  <div class="h-42">挂牌类型</div>
                                  <div class="h-43">{{item.trading_type==0?'作品挂牌':item.trading_type==1?'项目挂牌':''}}</div>
                                </div>
                                <div class="h-41">
                                  <div class="h-42">许可</div>
                                  <div class="h-43">{{item.permission_type==0?'专用许可':item.permission_type==1?'非专有许可':''}}</div>
                                </div>
                                <div class="h-41">
                                  <div class="h-42">出让专利</div>
                                  <div class="h-43">保护作品完整权</div>
                                </div>
                                <div class="h-41">
                                  <div class="h-42">作品类型</div>
                                  <div class="h-43">{{item.trading_type==0?worksTypeFormat(item):projectTypeFormat(item)}}</div>
                                </div>
                                <div class="h-41">
                                  <div class="h-42">创建时间</div>
                                  <div class="h-43">{{$moment(item.create_time).format('YYYY-MM-DD HH:mm')}}</div>
                                </div>
                              </div>
                            </div>

                            <object class="h-44" v-if="item.state==0">
                              <a href="javascript:;" class="h-45">编辑</a>
                              <a href="javascript:;" class="h-46">提交审核</a>
                              <a href="javascript:;" class="h-47">{{item.empower_type==1?'全部转让':'部分转让'}}</a>
                            </object>
                            <object class="h-44" v-if="item.state==1">
                              <a href="javascript:;" class="h-45">编辑</a>
                              <a href="javascript:;" class="h-46">提交审核</a>
                              <a href="javascript:;" class="h-47">{{item.empower_type==1?'全部转让':'部分转让'}}</a>
                            </object>
                            <object class="h-44" v-if="item.state==2 || item.state==3">
                              <a href="javascript:;" class="h-45">查看</a>
                              <a href="javascript:;" class="h-47">{{item.empower_type==1?'全部转让':'部分转让'}}</a>
                            </object>
                            <object class="h-44" v-if="item.state==4">
                              <a href="javascript:;" class="h-45">去签订</a>
                              <a href="javascript:;" class="h-47">{{item.empower_type==1?'全部转让':'部分转让'}}</a>
                            </object>
                            <object class="h-44" v-if="(item.state==5|| item.state==6) && item.up_state==0">
                              <a href="javascript:;" class="h-45">上架</a>
                              <a href="javascript:;" class="h-47">{{item.empower_type==1?'全部转让':'部分转让'}}</a>
                            </object>
                            <object class="h-44" v-if="(item.state==5|| item.state==6) && item.up_state==1">
                              <a href="javascript:;" class="h-46">下架</a>
                              <a href="javascript:;" class="h-47">{{item.empower_type==1?'全部转让':'部分转让'}}</a>
                            </object>
                            <object class="h-44" v-if="item.state==7">
                              <a href="javascript:;" class="h-47">{{item.empower_type==1?'全部转让':'部分转让'}}</a>
                            </object>

                            <div class="a-28">
                              <span v-if="item.state==0">草稿</span>
                              <span v-if="item.state==1">被驳回</span>
                              <span v-if="item.state==2 || item.state==3">审核中</span>
                              <span v-if="item.state==4">待签订</span>
                              <span v-if="(item.state==5|| item.state==6) && item.up_state==0">已下架</span>
                              <span v-if="(item.state==5|| item.state==6) && item.up_state==1">已上架</span>
                              <span v-if="item.state==7">全部售出</span>
<!--                              <span>{{item.empower_type==1?'全部转让':'部分转让'}}</span>-->
                            </div>
                          </a>
                        </li>

                    </ul>
                </div>
              <div class="a-35 h-48">
                <a :class="pageShow==1?'active':''" v-if="pageList[0]<=totalPage" href="javascript:;" @click="changePage(pageList[0])">{{pageList[0]}}</a>
                <a :class="pageShow==2?'active':''" v-if="pageList[1]<=totalPage" href="javascript:;" @click="changePage(pageList[1])">{{pageList[1]}}</a>
                <a :class="pageShow==3?'active':''" v-if="pageList[2]<=totalPage" href="javascript:;" @click="changePage(pageList[2])">{{pageList[2]}}</a>
                <a :class="pageShow==4?'active':''" v-if="pageList[3]<=totalPage" href="javascript:;" @click="changePage(pageList[3])">{{pageList[3]}}</a>
                <a :class="pageShow==5?'active':''" v-if="pageList[4]<=totalPage" href="javascript:;" @click="changePage(pageList[4])">{{pageList[4]}}</a>
                <a href="javascript:;" style="line-height: 30px;">...</a>
                <a :class="pageShow==0?'active':''" href="javascript:;" @click="changePage(0)">{{totalPage}}</a>
              </div>
            </div>
        </div>
        <div style="clear: both;"></div>
    </div>
</template>

<script>
  import {getMyTrading} from '@/api/myTrading'
    export default {
        name: "myTrading",
        data(){
          return{
            type:1,
            tradingList:[
              {
                "empower_type": 0,
                "product_id": 3,
                "putaway_time": "2020-08-05T14:27:49.000+0800",
                "create_time": "2020-08-05T14:27:49.000+0800",
                "see_num": 0,
                "trading_type": 0,
                "works_type":1,
                "cover_image": "http://www.zhifeng.site/images/index-2.png",
                "product_name": "测试作品2",
                "delist_text":"摘牌要求2",
                "state":0,
              },
              {
                "empower_type": 1,
                "product_id": 4,
                "putaway_time": "2020-08-05T14:27:49.000+0800",
                "create_time": "2020-08-05T14:27:49.000+0800",
                "see_num": 0,
                "trading_type": 0,
                "works_type":1,
                "cover_image": "http://www.zhifeng.site/images/index-2.png",
                "product_name": "测试作品3",
                "delist_text":"摘牌要求3",
                "state":1
              },
              {
                "empower_type": 1,
                "product_id": 5,
                "putaway_time": "2020-08-05T14:27:49.000+0800",
                "create_time": "2020-08-05T14:27:49.000+0800",
                "see_num": 0,
                "trading_type": 0,
                "works_type":1,
                "cover_image": "http://www.zhifeng.site/images/index-2.png",
                "product_name": "测试作品4",
                "delist_text":"摘牌要求4",
                "state":2
              },
              {
                "empower_type": 0,
                "product_id": 6,
                "putaway_time": "2020-08-05T14:27:49.000+0800",
                "create_time": "2020-08-05T14:27:49.000+0800",
                "see_num": 0,
                "trading_type": 0,
                "works_type":1,
                "cover_image": "http://www.zhifeng.site/images/index-2.png",
                "product_name": "测试作品5",
                "delist_text":"摘牌要求5",
                "state":3
              },
              {
                "empower_type": 0,
                "product_id": 6,
                "putaway_time": "2020-08-05T14:27:49.000+0800",
                "create_time": "2020-08-05T14:27:49.000+0800",
                "see_num": 0,
                "trading_type": 0,
                "works_type":1,
                "cover_image": "http://www.zhifeng.site/images/index-2.png",
                "product_name": "测试作品5",
                "delist_text":"摘牌要求5",
                "state":4
              },
              {
                "empower_type": 0,
                "product_id": 6,
                "putaway_time": "2020-08-05T14:27:49.000+0800",
                "create_time": "2020-08-05T14:27:49.000+0800",
                "see_num": 0,
                "trading_type": 0,
                "works_type":1,
                "cover_image": "http://www.zhifeng.site/images/index-2.png",
                "product_name": "测试作品5",
                "delist_text":"摘牌要求5",
                "state":5,
                "up_state":0
              },
              {
                "empower_type": 0,
                "product_id": 6,
                "putaway_time": "2020-08-05T14:27:49.000+0800",
                "create_time": "2020-08-05T14:27:49.000+0800",
                "see_num": 0,
                "trading_type": 0,
                "works_type":1,
                "cover_image": "http://www.zhifeng.site/images/index-2.png",
                "product_name": "测试作品5",
                "delist_text":"摘牌要求5",
                "state":6,
                "up_state":1
              },
              {
                "empower_type": 0,
                "product_id": 6,
                "putaway_time": "2020-08-05T14:27:49.000+0800",
                "create_time": "2020-08-05T14:27:49.000+0800",
                "see_num": 0,
                "trading_type": 0,
                "works_type":1,
                "cover_image": "http://www.zhifeng.site/images/index-2.png",
                "product_name": "测试作品5",
                "delist_text":"摘牌要求5",
                "state":7
              }
            ],   //我的挂牌集合
            totalPage:10,   //总页数
            currentPage:1,  //当前页

            pageList:[1,2,3,4,5], //分页
            pageShow:1, //显示选中的分页
            projectTypeOptions:[],  //项目类型字典
            worksTypeOptions:[]  //作品类型字典
          }
        },
        created(){
          this.getDicts("project_type").then(response => {
            this.projectTypeOptions = response.data;
          });
          this.getDicts("works_type").then(response => {
            this.worksTypeOptions = response.data;
          });
          this.getMyTradingList("all",1);
        },
        methods:{
          changeType(e){
            this.type=e;
            switch(e){
              case 1:this.getMyTradingList("all",1); //全部
              case 2:this.getMyTradingList("audit",1); //待审核
              case 3:this.getMyTradingList("success",1); //挂牌成功
              case 4:this.getMyTradingList("sign",1); //待签订
              case 5:this.getMyTradingList("deal",1); //已成交
            }
          },
          //字典
          projectTypeFormat(row){
            return this.selectDictLabel(this.projectTypeOptions, row.project_type);
          },
          worksTypeFormat(row){
            return this.selectDictLabel(this.worksTypeOptions, row.works_type);
          },
          getMyTradingList(type,currentPage){
            let data={type:type,currentPage:currentPage}
            getMyTrading(data).then(response=>{
              this.tradingList=response.data.tradingList;
              this.totalPage=response.data.totalPage;
            })
          },
          changePage(e){ //点击切换页
            let ye=e;
            if(e==1||e==2||e==3){
              this.pageList=[1,2,3,4,5]
              this.pageShow=e
            }else if(e>3 && e<this.totalPage-1){
              this.pageList=[e-2,e-1,e,e+1,e+2];
              this.pageShow=3
            }else if(e==this.totalPage-1){
              this.pageList=[e-3,e-2,e-1,e,e+1];
              this.pageShow=4
            }else if(e==this.totalPage){
              this.pageShow=5
            }else if(e==0){
              this.pageShow=0
              ye=this.totalPage;
            }
            this.currentPage=e;
            this.getMyTradingList(this.type,ye);
          },
        }
    }
</script>

<style scoped>
  @import "../../css/index.css";
  @import "../../css/user_listing.css";
  @import "../../css/idangerous.swiper.css";
</style>
